<template>
	<view class="container">
		<view :class="{ 'tui-item-list': scrollTop >= 0 }">
			<view class="tui-item-item" v-for="(shop, Index) in shopList" :key="Index">
				<tui-card :title="{text:shop.shopName,color:'#000'}" :tag="{text:shop.shopTypeName}" :border="true" @click="detail" :index="Index">
					<template v-slot:body>
						<tui-list-cell>
							<view class="tui-flex">
								<view class='tui-cell-title'>地址： {{ shop.address }}</view>
							</view>
						</tui-list-cell>
					</template>
					<template v-slot:footer>
						<view class="tui-default">

						</view>
					</template>
				</tui-card>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<!--加载loadding-->
		<view class="tui-bg-box" v-if="!mobile">
			<view style="display:flex;justify-content: center;">
				<image src="/static/images/login/logo.png" mode="aspectFit" style="width:260rpx"></image>
			</view>
			<view style="display:flex;padding: 50rpx;  font-size: 32rpx;color:#000;font-weight:bold;">
				为了您获得更好的体验，冲鸭外卖福利社申请获得以下权限：
			</view>
			<view style="display:flex;padding:0 50rpx;  font-size: 28rpx;color:#908e91;">获得您的手机号</view>
		</view>
		<view class="tui-getphone" v-if="!mobile">
			<tui-button type="warning" hover-class="tui-button-hover" :loading="btnLoading" open-type="getPhoneNumber"
			 @getphonenumber="onGetPhoneNumber">
				授权手机号
			</tui-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import {
		mapState
	} from "vuex";


	export default {
		data() {
			return {
				btnLoading: false,
				loadding: false,
				scrollTop: 0,
				shopList: [],
			};
		},
		computed: {

			...mapState(["mobile"]),

		},
		onLoad() {
			// uni.checkSession({
			// 	success(res) {
			// 		console.log(res)
			// 	}
			// })

			if (this.mobile) {
				this.getList()
			}
		},
		methods: {
			...mapMutations(['setMobile']),  
			onGetPhoneNumber(e) {
				console.log(e)
				if (e.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  

					//拒绝授权后弹出一些提示  

				} else { //允许授权  
					console.log(e.encryptedData)
					e.encryptedData //加密的用户信息  
					e.iv //加密算法的初始向量  时要用到  
					this.tui.request(
							"/api/user/bind",
							"POST", {
								encryptedData: e.encryptedData,
								iv: e.iv,

							},
							false,
							false,
							false
						)
						.then((res) => {
							if (res.code == 200) {
								this.setMobile(res.data.mobile);
								this.getList()
							}
						});
				}
			},
			getList() {
				this.loadding = true;
				this.tui.request(
						"/api/shop/my",
						"GET", {
						},
						false,
						false,
						false
					)
					.then((res) => {
						this.shopList = res.data
						this.loadding = false;
					});
			},
			detail(e){
				
				let index = e.index;
				uni.navigateTo({
					url: "/pages/myshops/shop" + '?detail=' + JSON.stringify({shopId:this.shopList[index].shopId,restCash:this.shopList[index].restCash}),
				});
			}

		},

	
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.tui-getphone {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 999;
		padding: 10rpx 25rpx 15rpx;
		box-sizing: border-box;
	}

	.tui-item-list {
		padding-bottom: 100rpx;
	}

	.tui-item-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>
